<template>
    <div class="indexMenus">
        <div class="list">
            <div class="li" v-for="i in mold" @click="nearShopPage($event)">
                <div class="imgBox">
                    <image class="image" :src="i.img"></image>
                </div>
                <text class="text">{{i.text}}</text>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index-menu",
        data(){
            return{
                mold:[
                    {
                        "img":"../../../web/img/shop_store_gasstation.png",
                        "text":"加油站"
                    },
                    {
                        "img":"../../../web/img/shop_store_Vehiclecleaning.png",
                        "text":"加油站"
                    },
                    {
                        "img":"../../../web/img/shope_store_vehiclemaintenanceandrepair.png",
                        "text":"加油站"
                    },
                    {
                        "img":"../../../web/img/shop_store_carbeauty.png",
                        "text":"加油站"
                    },
                    {
                        "img":"../../../web/img/shop_store_caradaptations_1.png",
                        "text":"加油站"
                    },
                    {
                        "img":"../../../web/img/shop_store_carbeauty.png",
                        "text":"加油站"
                    },
                    {
                        "img":"../../../web/img/shop_store_majorservice.png",
                        "text":"加油站"
                    },
                    {
                        "img":"../../../web/img/shop_store_majorservice.png",
                        "text":"加油站"
                    },

                ]
            }
        },
        mounted(){
             var setbg=document.getElementsByClassName("imgBox");
            setbg[0].style.background="#f28011";
            setbg[1].style.background="#ff7c84";
            setbg[2].style.background="#06b1fb";
            setbg[3].style.background="#febb44";
            setbg[4].style.background="#89d950";
            setbg[5].style.background="#16dadc";
            setbg[6].style.background="#fec832";
            // setbg[7].style.background="#f28011";
        },
        methods:{
            nearShopPage(e){
                location.href="#/classification"
            },
        }
    }
</script>

<style scoped>
.indexMenus{
    width:100%;
}
    .list{
        padding:0 30px;
        display: block;
    }
    .li{
        float:left;
        margin:0 37px;
        margin-top:50px;
    }
    .imgBox{
        border-radius: 50%;
        width:98px;
        height:98px;
        background: #717171;
    }
    .image{
        width:48px;
        height:48px;
        margin:0 auto;
        margin-top:25px;
    }
    .text{
         font-size: 28px;
        text-align:center;
        margin-top:15px;
    }
</style>